<template>
    <div class="container">
        <div class="left">
            <div class="top">
                <div class="info">
                    <img loading="lazy" style="width:120px;height:120px" :src="info?.icon" alt="">
                    <div class="data">
                        <div class="font text-overflow app-title"
                            itemprop="name"
                            style="font-size: 20px;font-weight: 700;color:#3E4351">
                            {{ info?.name }}
                        </div>
                        <div class="font text-overflow app-info" style="font-size: 14px;color:#505662">
                            Developer: {{ info?.developer_name }}
                        </div>
                        <div class="font text-overflow app-info" style="font-size: 14px;color:#505662">
                            latest version: {{ info?.version }}
                        </div>
                        <div>
                            <span style="color:#6EA2E3">⇒</span><a class="link text-overflow">What’s .APK / .XAPK file
                                and how to
                                install?</a>
                        </div>
                    </div>
                    <div class="btn">
                        <div style="display: flex;align-items: center;gap:8px">
                            <svg style="margin-top: -2px" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                viewBox="0 0 16 16" fill="none">
                                <path
                                    d="M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10M4.66667 6.66667L8 10M8 10L11.3333 6.66667M8 10V2"
                                    stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            <span class="font" style="font-size: 14px;color:#fff">Download APK</span>
                            <span class="font" style="font-size: 15px;color:#fff">-</span>
                            <span class="font" style="font-size: 12px;color:#fff">({{ info?.size }} MB)</span>
                        </div>
                    </div>
                </div>
                <div class="rank">
                    <div class="rankItem">
                        <div style="display: flex;gap:8px;align-items: center;">
                            <svg style="margin-top:-3px" xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                viewBox="0 0 14 14" fill="none">
                                <g clip-path="url(#clip0_8154_214)">
                                    <path
                                        d="M6.72292 1.33874C6.74848 1.28709 6.78797 1.24362 6.83693 1.21322C6.88589 1.18282 6.94237 1.16672 7 1.16672C7.05763 1.16672 7.11411 1.18282 7.16307 1.21322C7.21203 1.24362 7.25152 1.28709 7.27709 1.33874L8.62459 4.06816C8.71336 4.2478 8.84439 4.40323 9.00645 4.52109C9.16851 4.63895 9.35674 4.71572 9.555 4.74482L12.5685 5.18582C12.6256 5.1941 12.6792 5.21818 12.7234 5.25535C12.7675 5.29253 12.8003 5.34131 12.8182 5.39618C12.836 5.45104 12.8382 5.50981 12.8243 5.56583C12.8105 5.62184 12.7813 5.67288 12.74 5.71316L10.5607 7.83532C10.4169 7.97538 10.3094 8.14827 10.2473 8.33911C10.1852 8.52994 10.1705 8.73301 10.2043 8.93082L10.7188 11.9292C10.7288 11.9862 10.7227 12.045 10.701 12.0987C10.6793 12.1525 10.6429 12.199 10.596 12.2331C10.5491 12.2671 10.4936 12.2873 10.4358 12.2913C10.3779 12.2954 10.3202 12.2831 10.269 12.2558L7.57517 10.8395C7.39767 10.7463 7.20019 10.6976 6.99971 10.6976C6.79923 10.6976 6.60175 10.7463 6.42425 10.8395L3.731 12.2558C3.67986 12.2829 3.62215 12.2951 3.56443 12.291C3.50671 12.2869 3.4513 12.2667 3.40451 12.2326C3.35771 12.1986 3.3214 12.1521 3.29972 12.0985C3.27803 12.0448 3.27184 11.9861 3.28184 11.9292L3.79575 8.93141C3.8297 8.7335 3.81499 8.5303 3.7529 8.33935C3.69081 8.14839 3.58319 7.97541 3.43934 7.83532L1.26 5.71374C1.21835 5.67351 1.18883 5.62239 1.17481 5.5662C1.1608 5.51001 1.16284 5.45102 1.18071 5.39593C1.19859 5.34085 1.23157 5.2919 1.27591 5.25465C1.32025 5.21739 1.37416 5.19335 1.4315 5.18524L4.44442 4.74482C4.6429 4.71595 4.8314 4.63927 4.99368 4.5214C5.15596 4.40352 5.28716 4.24798 5.376 4.06816L6.72292 1.33874Z"
                                        fill="#FF6900" stroke="#FF6900" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </g>
                                <defs>
                                    <clipPath id="clip0_8154_214">
                                        <rect width="14" height="14" fill="white" />
                                    </clipPath>
                                </defs>
                            </svg>
                            <div itemprop="aggregateRating" class="rankText">
                                <span itemprop="ratingValue">{{ info?.star }}</span>
                            </div>
                        </div>
                        <div itemprop="aggregateRating" itemscope class="font" style="color:#9DA2AD;font-size: 12px;">
                            <span itemprop="ratingCount">{{ info?.review }} reviews</span>
                        </div>
                    </div>
                    <div class="rankItem">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path
                                d="M7.50001 10L9.16668 11.6667L12.5 8.33333M16.6667 10.8333C16.6667 15 13.75 17.0833 10.2833 18.2917C10.1018 18.3532 9.90462 18.3502 9.72501 18.2833C6.25001 17.0833 3.33334 15 3.33334 10.8333V5C3.33334 4.77898 3.42114 4.56702 3.57742 4.41074C3.7337 4.25446 3.94566 4.16666 4.16668 4.16666C5.83334 4.16666 7.91668 3.16666 9.36668 1.9C9.54322 1.74916 9.7678 1.66629 10 = 1.66629C10.2322 1.66629 10.4568 1.74916 10.6333 1.9C12.0917 3.175 14.1667 4.16666 15.8333 4.16666C16.0544 4.16666 16.2663 4.25446 16.4226 4.41074C16.5789 4.56702 16.6667 4.77898 16.6667 5V10.8333Z"
                                stroke="#009966" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <div class="font" style="color:#9DA2AD;font-size: 12px;">
                            TRUSTED APP
                        </div>
                    </div>
                    <div class="rankItem">
                        <div class="font" style="font-size: 14px;color:#505662;">{{ info?.datePublished }}</div>
                        <div class="font" style="color:#9DA2AD;font-size: 12px;">
                            Update date
                        </div>
                    </div>
                    <div class="rankItem">
                        <div class="font" style="font-size: 14px;color:#505662;">Android 7.0+</div>
                        <div class="font" style="color:#9DA2AD;font-size: 12px;">
                            Android OS
                        </div>
                    </div>
                </div>
                <div class="bigBtn">
                    <div style="display: flex;align-items: center;gap:8px">
                        <svg style="margin-top: -2px" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                            viewBox="0 0 16 16" fill="none">
                            <path
                                d="M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10M4.66667 6.66667L8 10M8 10L11.3333 6.66667M8 10V2"
                                stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <span class="font" style="font-size: 14px;color:#fff">Download APK</span>
                        <span class="font" style="font-size: 15px;color:#fff">-</span>
                        <span class="font" style="font-size: 12px;color:#fff">({{ info?.size }} MB)</span>
                    </div>
                </div>
            </div>
            <div class="screenshots">
                <div class="font" style="font-size: 18px;font-weight: 700;color: #3E4351;">
                    Screenshots
                </div>
                <ImageWall :images="images" />
            </div>
            <div class="textContainer">
                <div class="secondTitle">Description</div>
                <div class="desc"> Discord is where you can make a home for your communities and friends. Where you can
                    stay close and have fun over text, voice, and video. Whether you’re part of a school club, a gaming
                    group, a worldwide art community, or just a handful of friends that want to spend time together,
                    Discord makes it easy to talk every day and hang out more often.</div>
                <div class="desc" style="font-weight: 700;">CREATE AN INVITE-ONLY SPACE</div>
                <div class="desc"> • Discord servers are organized into topic-based channels where you can collaborate,
                    share, and just talk about your day without clogging up a group chat.</div>
                <div class="desc"> • Discord servers are organized into topic-based channels where you can collaborate,
                    share, and just talk about your day without clogging up a group chat.</div>
                <a class="readlink">Read more</a>
            </div>
            <div class="textContainer">
                <div class="secondTitle">What's New</div>
                <div class="desc"> Discord is where you can make a home for your communities and friends. Where you can
                    stay close and have fun over text, voice, and video. Whether you’re part of a school club, a gaming
                    group, a worldwide art community, or just a handful of friends that want to spend time together,
                    Discord makes it easy to talk every day and hang out more often.</div>
                <a class="readlink">Read more</a>
            </div>
            <div class="textContainer">
                <div class="secondTitle">FAQ</div>
                <div class="desc" style="font-weight: 700;"> 1. Download Discord to Talk, Play, and Hang Out</div>
                <div class="desc"> Download Discord to talk, play, and hang out with friends over voice, video, or text.
                    Available for Windows, macOS, Linux, iOS, Android devices</div>
                <div class="desc" style="font-weight: 700;"> 2. Download Discord to Talk, Play, and Hang Out</div>
                <div class="desc"> Download Discord to talk, play, and hang out with friends over voice, video, or text.
                    Available for Windows, macOS, Linux, iOS, Android devices</div>
                <a class="readlink">Read more</a>
            </div>
            <div class="additional">
                <div class="additionalTitle">
                    Additional information
                </div>
                <div class="additionalItemList">
                    <div class="additionalItem">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path
                                d="M1.33334 6.66667H14.6667M13.3333 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3333 4H8.06668C7.84369 4.00219 7.62371 3.94841 7.42688 3.84359C7.23005 3.73877 7.06265 3.58625 6.94001 3.4L6.40001 2.6C6.2786 2.41565 6.11333 2.26432 5.91901 2.1596C5.72469 2.05488 5.50742 2.00004 5.28668 2H2.66668C2.31305 2 1.97392 2.14048 1.72387 2.39052C1.47382 2.64057 1.33334 2.97971 1.33334 3.33333V12C1.33334 12.3536 1.47382 12.6928 1.72387 12.9428C1.97392 13.1929 2.31305 13.3333 2.66668 13.3333H13.3333Z"
                                stroke="#505662" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <div style="display: flex;flex-direction: column;">
                            <div class="itemTitle">
                                Package Name
                            </div>
                            <div class="itemDesc">
                                {{ info?.app_store }}
                            </div>
                        </div>
                    </div>
                    <div class="additionalItem">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path
                                d="M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10M4.66667 6.66667L8 10M8 10L11.3333 6.66667M8 10V2"
                                stroke="#505662" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <div style="display: flex;flex-direction: column;">
                            <div class="itemTitle">
                                Downloads
                            </div>
                            <div class="itemDesc">
                                {{ info?.downloads }}
                            </div>
                        </div>
                    </div>
                    <div class="additionalItem">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path
                                d="M14 5.00004V4.00004C14 3.64642 13.8595 3.30728 13.6095 3.05723C13.3594 2.80718 13.0203 2.66671 12.6667 2.66671H3.33333C2.97971 2.66671 2.64057 2.80718 2.39052 3.05723C2.14048 3.30728 2 3.64642 2 4.00004V13.3334C2 13.687 2.14048 14.0261 2.39052 14.2762C2.64057 14.5262 2.97971 14.6667 3.33333 14.6667H5.66667M10.6667 1.33337V4.00004M5.33333 1.33337V4.00004M2 6.66671H5.33333M11.6667 11.6667L10.6667 10.8667V9.33337M14.6667 10.6667C14.6667 12.8758 12.8758 14.6667 10.6667 14.6667C8.45753 14.6667 6.66667 12.8758 6.66667 10.6667C6.66667 8.45757 8.45753 6.66671 10.6667 6.66671C12.8758 6.66671 14.6667 8.45757 14.6667 10.6667Z"
                                stroke="#505662" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <div style="display: flex;flex-direction: column;">
                            <div class="itemTitle">
                                Update
                            </div>
                            <div class="itemDesc">
                                {{ info?.datePublished }}
                            </div>
                        </div>
                    </div>
                    <div class="additionalItem">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path
                                d="M7.99999 8.66667C9.84094 8.66667 11.3333 7.17428 11.3333 5.33333C11.3333 3.49238 9.84094 2 7.99999 2C6.15904 2 4.66666 3.49238 4.66666 5.33333C4.66666 7.17428 6.15904 8.66667 7.99999 8.66667ZM7.99999 8.66667C9.41448 8.66667 10.771 9.22857 11.7712 10.2288C12.7714 11.229 13.3333 12.5855 13.3333 14M7.99999 8.66667C6.5855 8.66667 5.22895 9.22857 4.22875 10.2288C3.22856 11.229 2.66666 12.5855 2.66666 14"
                                stroke="#505662" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <div style="display: flex;flex-direction: column;">
                            <div class="itemTitle">
                                Content Tating
                            </div>
                            <div class="itemDesc">
                                Rated For 3+
                            </div>
                        </div>
                    </div>
                    <div class="additionalItem">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path
                                d="M7.73333 11.2C7.6633 11.4539 7.54394 11.6915 7.38207 11.8993C7.2202 12.107 7.019 12.2809 6.78995 12.4109C6.5609 12.5409 6.30848 12.6245 6.04712 12.6569C5.78575 12.6894 5.52056 12.67 5.26667 12.6C5.01278 12.53 4.77517 12.4106 4.56741 12.2487C4.35965 12.0869 4.18581 11.8857 4.0558 11.6566C3.9258 11.4276 3.84219 11.1752 3.80974 10.9138C3.77728 10.6524 3.79663 10.3872 3.86667 10.1333M2 7.33333L14 4V12L2 9.33333V7.33333Z"
                                stroke="#505662" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <div style="display: flex;flex-direction: column;">
                            <div class="itemTitle">
                                Advertisement
                            </div>
                            <div class="itemDesc">
                                Not specified
                            </div>
                        </div>
                    </div>
                    <div class="additionalItem">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path
                                d="M5.33331 14H10.6666M7.99998 11.3333V14M2.66665 2H13.3333C14.0697 2 14.6666 2.59695 14.6666 3.33333V10C14.6666 10.7364 14.0697 11.3333 13.3333 11.3333H2.66665C1.93027 11.3333 1.33331 10.7364 1.33331 10V3.33333C1.33331 2.59695 1.93027 2 2.66665 2Z"
                                stroke="#505662" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <div style="display: flex;flex-direction: column;">
                            <div class="itemTitle">
                                Operating System
                            </div>
                            <div class="itemDesc" style="color:#5883C1">
                                Android 5.0
                            </div>
                        </div>
                    </div>
                    <div class="additionalItem">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path
                                d="M2.2 4.66668L8 8.00002M8 8.00002L13.8 4.66668M8 8.00002V14.6667M14 5.33335C13.9998 5.09953 13.938 4.86989 13.821 4.66746C13.704 4.46503 13.5358 4.29692 13.3333 4.18002L8.66667 1.51335C8.46397 1.39633 8.23405 1.33472 8 1.33472C7.76595 1.33472 7.53603 1.39633 7.33333 1.51335L2.66667 4.18002C2.46418 4.29692 2.29599 4.46503 2.17897 4.66746C2.06196 4.86989 2.00024 5.09953 2 5.33335V10.6667C2.00024 10.9005 2.06196 11.1301 2.17897 11.3326C2.29599 11.535 2.46418 11.7031 2.66667 11.82L7.33333 14.4867C7.53603 14.6037 7.76595 14.6653 8 14.6653C8.23405 14.6653 8.46397 14.6037 8.66667 14.4867L13.3333 11.82C13.5358 11.7031 13.704 11.535 13.821 11.3326C13.938 11.1301 13.9998 10.9005 14 10.6667V5.33335Z"
                                stroke="#505662" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <div style="display: flex;flex-direction: column;">
                            <div class="itemTitle">
                                Category
                            </div>
                            <div class="itemDesc" style="color:#5883C1">
                                Social
                            </div>
                        </div>
                    </div>
                    <div class="additionalItem">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <g clip-path="url(#clip0_8168_4)">
                                <path
                                    d="M3.33331 10.6667V8.66671C3.33331 8.4899 3.40355 8.32033 3.52858 8.1953C3.6536 8.07028 3.82317 8.00004 3.99998 8.00004H12C12.1768 8.00004 12.3464 8.07028 12.4714 8.1953C12.5964 8.32033 12.6666 8.4899 12.6666 8.66671V10.6667M7.99998 8.00004V5.33337M11.3333 10.6667H14C14.3682 10.6667 14.6666 10.9652 14.6666 11.3334V14C14.6666 14.3682 14.3682 14.6667 14 14.6667H11.3333C10.9651 14.6667 10.6666 14.3682 10.6666 14V11.3334C10.6666 10.9652 10.9651 10.6667 11.3333 10.6667ZM1.99998 10.6667H4.66665C5.03484 10.6667 5.33331 10.9652 5.33331 11.3334V14C5.33331 14.3682 5.03484 14.6667 4.66665 14.6667H1.99998C1.63179 14.6667 1.33331 14.3682 1.33331 14V11.3334C1.33331 10.9652 1.63179 10.6667 1.99998 10.6667ZM6.66665 1.33337H9.33331C9.7015 1.33337 9.99998 1.63185 9.99998 2.00004V4.66671C9.99998 5.0349 9.7015 5.33337 9.33331 5.33337H6.66665C6.29846 5.33337 5.99998 5.0349 5.99998 4.66671V2.00004C5.99998 1.63185 6.29846 1.33337 6.66665 1.33337Z"
                                    stroke="#505662" stroke-linecap="round" stroke-linejoin="round" />
                            </g>
                            <defs>
                                <clipPath id="clip0_8168_4">
                                    <rect width="16" height="16" fill="white" />
                                </clipPath>
                            </defs>
                        </svg>
                        <div style="display: flex;flex-direction: column;">
                            <div class="itemTitle">
                                Available on
                            </div>
                            <div class="itemDesc" style="color:#5883C1">
                                Google Play
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div></div>
        </div>
        <div class="right"></div>
    </div>
</template>
<script setup>
import { useI18n } from 'vue-i18n';
const { locale } = useI18n();
const images = ref([])
const route = useRoute()

const app_slug = route.params.appslug


const seoTitle = ref('')
const seoDesc = ref('')
const info = ref({})
const loadData = async () => {
    const { data } = await useApi('/api/app/getAppList',{
        method: 'GET',
        params: {
            language: route.params.hasOwnProperty('language') ? route.params.language : 'en',
            app_slug: app_slug,
        }
    })
    info.value = data.value
    
    seoTitle.value = data.value?.seo_title
    seoDesc.value = data.value?.seo_desc
    
    images.value = data.value?.screenshot.split(',')
    
}
const config = useRuntimeConfig();
loadData()
useHead({
    title: computed(() => { return seoTitle.value + ' - APKDock'  }),
    htmlAttrs: {
    lang: locale.value 
  },
    meta: [
        {
            name: 'description',
            content: computed(() => { return seoDesc.value + '- APKDock'})
        },
        {
            name: 'robots',
            content: 'noindex,nofollow'
        },
    ],
    link: [
    {
      rel: 'canonical',
      href: computed(() => {
        return `${config.public.apiBase}${route.fullPath}`;
      })
    }
  ]
})
</script>
<style scoped lang="less">
.container {
    display: flex;
    gap: 32px;
    margin-bottom: 32px;

    .left {
        width: 66%;

        .top {
            padding: 16px 24px;
            border-radius: 12px;
            border: 1px solid var(--Gray-100, #F3F4F6);
            background: #FFF;
            /* Card Shadow */
            box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
            margin: 12px 0;

            .info {
                display: flex;
                gap: 16px;
                align-items: center;
                width: 100%;

                .data {
                    display: flex;
                    flex-direction: column;
                    width: 100%;

                    .link {
                        overflow: hidden;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        color: var(--Sky-500, #6EA2E3);
                        text-overflow: ellipsis;
                        font-family: Roboto;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 30px;
                        text-decoration-line: underline;
                        text-decoration-style: solid;
                        text-decoration-skip-ink: auto;
                        text-decoration-thickness: auto;
                        text-underline-offset: auto;
                        text-underline-position: from-font;
                    }
                }

                .btn {
                    margin-left: auto;
                    // 不允许选中
                    user-select: none;
                    cursor: pointer;
                    display: flex;
                    min-height: 40px;
                    padding: 0px 12px;
                    justify-content: center;
                    align-items: center;
                    gap: 8px;
                    background: #775CE1;
                    border-radius: 4px;
                    white-space: nowrap;
                    min-width: fit-content;
                }
            }

            .rank {
                display: flex;
                margin-top: 24px;
                align-items: center;
                gap: 4px;
                width: 100%;

                .rankText {
                    color: var(--Orange-500, #FF6900);
                    font-family: Roboto;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 20px;
                    /* 142.857% */
                }

                .rankItem {
                    display: flex;
                    flex-direction: column;
                    gap: 2px;
                    width: 24%;
                }
            }
        }

        .screenshots {
            margin-top: 12px 0;
            padding: 16px 24px;
            border-radius: 12px;
            border: 1px solid var(--Gray-100, #F3F4F6);
            background: #FFF;
        }

        .textContainer {
            margin-top: 12px;
            padding: 16px 24px;
            border-radius: 12px;
            border: 1px solid var(--Gray-100, #F3F4F6);
            background: #FFF;

            .secondTitle {
                color: var(--Text-Title, #3E4351);
                font-family: Roboto;
                font-size: 18px;
                font-style: normal;
                font-weight: 700;
                line-height: 28px;
                /* 155.556% */
            }

            .desc {
                overflow: hidden;
                color: var(--Text-Text, #505662);
                text-overflow: ellipsis;
                font-family: Roboto;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
                /* 171.429% */
                margin: 4px 0;
            }

            .readlink {
                color: var(--Brand, #775CE1);
                font-family: Roboto;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 24px;
                /* 171.429% */
                flex: 1 0 0;
                margin-top: 12px;
                display: flex;
            }
        }

        .additional {
            margin-top: 12px;
            padding: 16px 24px;
            border-radius: 12px;
            border: 1px solid var(--Gray-100, #F3F4F6);
            background: #FFF;
            display: flex;
            flex-direction: column;
            gap: 12px;

            .additionalTitle {
                color: var(--Text-Title, #3E4351);
                font-family: Roboto;
                font-size: 18px;
                font-style: normal;
                font-weight: 700;
                line-height: 28px;
            }

            .additionalItemList {
                display: flex;
                flex-wrap: wrap;
                gap: 16px;
            }

            .additionalItem {
                display: flex;
                gap: 8px;
                width: calc(50% - 8px);
            }

            @media screen and (min-width: 1200px) {
                .additionalItem {
                    width: calc(33.333% - 11px);
                    display: flex;
                    gap: 8px;
                }
            }
        }
    }

    .itemTitle {
        color: var(--Text-Text, #505662);
        font-family: Roboto;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
        /* 142.857% */
    }

    .itemDesc {
        color: var(--Text-Text, #505662);
        font-family: Roboto;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        /* 142.857% */
    }

    .right {
        width: 33%;
    }

    .font {
        overflow: hidden;
        color: var(--Text-Text, #505662);
        text-overflow: ellipsis;
        font-family: Roboto;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
        /* 214.286% */
    }

    .app-title {
        max-width: 300px;
        width: 100%;
    }

    .app-info {
        max-width: 250px;
        width: 100%;
    }
}

.bigBtn {
    display: none;
    margin-left: auto;
    // 不允许选中
    user-select: none;
    cursor: pointer;
    min-height: 40px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: #775CE1;
    border-radius: 4px;
    white-space: nowrap;
    min-width: fit-content;
}

@media screen and (max-width: 1550px) {
    .container {
        display: flex;

        .left {
            width: 100%
        }

        .right {
            display: none
        }

    }
}

@media screen and (max-width: 1170px) {
    .container {
        display: flex;

        .left {
            width: 100%;

            .btn {
                display: none !important;
            }

            .bigBtn {
                display: flex;
            }
        }

        .right {
            display: none
        }
    }
}


.text-overflow {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>